<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<!--
	需求1:定义一个vbig个，不lv-text功能类似,但会把绑定的数值放大10倍。
	需求2:定义一个v-平bind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。-->
		<div id="app">
			<h2>当前的n值是<span v-text="n"></span></h2>
			<h2>当前的n*10值是<span v-big="n"></span></h2>
			<input type="text" v-fbind="n">
			<button @click="n++">n++</button>
		</div>
		<script src="../vue.js"></script>
		<script>
			var app = new Vue({
				el: '#app', //Id #id class .name  标签 div
				//输出的数据
				data: function() {
					return {
						n: 5,
						m: 4
					}
				},
				directives: {
					//big函数何时会被调用?1.指令与元素成功绑定时(一上来)。2.指令所在的模板被重新解析时。|
					big(element, binding) {
						element.innerText = binding.value * 10
						//console.log(element, binding);
					},
					fbind: {
						//指令与元素成功绑定时
						bind(element, binding) {
							element.value = binding.value
							console.log(element, binding);
							console.log("指令与元素成功绑定时")
						},
						//指令所在元素被插入页面时
						inserted(element, binding) {
							element.focus()
							console.log("指令所在元素被插入页面时")
						},
						//指令所在的模板被重新解析时
						update(element, binding) {
							element.value = binding.value
							console.log("指令所在的模板被重新解析时")
						}
					}
				}
			});
			
			
		</script>
	</body>
</html>
